<template>
	<div class='project-basic-info'>
		<el-form label-width="80px">
			<h2 class="center">基本信息</h2>
			<!-- 头像 -->
			<div class="center">
				<el-image
					style="width: 100px;"
					:src="project.avatarUrl || LOGO"
					fit="fill"
					:preview-src-list="[project.avatarUrl]"
				/>
			</div>
			<el-form-item label="项目标题">
				<h2>{{project.name}}</h2>
			</el-form-item>
			<el-form-item label="项目成员">
				<div
					v-for="(member,index) in members"
					:key="index"
				>
					{{member.userId}} - {{member.name}}: {{member.job}}
				</div>
			</el-form-item>
			<el-form-item label="热度统计">
				<span>
					<Iconfont
						type=''
						color= '#f56c6c'
						name='el-icon-star-on'
					/>
					{{project.collect || 0}}
				</span>
				<span style="margin-left: 10px;">
					<Iconfont
						type=''
						name='el-icon-view'
					/>
					{{project.read || 0}}
				</span>
			</el-form-item>
			<!-- 竞赛信息 -->
			<el-form-item	label="参赛信息">
				{{project.awardTime}}
				<span v-if="project.compId">
					,{{awardMsg}}:
					<strong>{{project.compName}}</strong>
				</span>
				<div v-else>
					<el-select
						style="width: 100px;"
						v-model="awardLevel"
					>
						<el-option
							v-for="item in PRIZE_LEVELS"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
					<el-select
						style="width: 300px;"
						filterable
						v-model="compId"
					>
						<el-option
							v-for="item in competitions"
							:key="item.id"
							:label="item.name"
							:value="item.id"
						/>
					</el-select>
					<div
						style="margin-top: 10px;"
						class="btn"
					>
						<el-button
							@click="onclickCreateComp"
						>
							去创建该比赛
						</el-button>
						<el-button
							@click="onclickPutProjectComp(compId)"
							type="primary"
						>
							确认修改项目参赛信息
						</el-button>
					</div>
				</div>
			</el-form-item>
			<!-- 项目标签 -->
			<el-form-item label="项目标签">
				<el-tag
					style="margin-right: 5px;"
					v-for="tag in project.tags"
					:key="tag"
				>
					{{tag}}
				</el-tag>
			</el-form-item>
			<!-- 发布时间 -->
			<el-form-item label="发布时间">
				{{project.publishTime}}
			</el-form-item>
			<!-- 查看介绍 -->
			<el-form-item label="项目介绍">
				<el-button
					size="small"
					@click="showIntro=true"
				>
					点击查看
				</el-button>
			</el-form-item>
		</el-form>
		<IntroCard
			v-if="showIntro"
			title="项目介绍"
			:html="project.intro"
			@close="showIntro=false"
		/>
	</div>
</template>

<script>
import { putProject } from '@project/api/project'
import { PRIZE_LEVELS, LOGO } from '@/constants/staticData'
import { copyData } from '@/utils/tools'
export default {
  props: {
    project: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      LOGO,
      PRIZE_LEVELS,
      showIntro: false,
      competitions: [],
      awardLevel: this.project.awardLevel,
      compId: this.project.compId
    }
  },
  computed: {
    members() {
      const sortRes = JSON.parse(JSON.stringify(this.project.members))

      sortRes.sort((a, b) => a.rank - b.rank)
      return sortRes.map(item => {
        return {
          userId: item.memberUser.userId,
          name: item.memberUser.nickname,
          job: item.job
        }
      })
    },
    awardMsg() {
      const level = PRIZE_LEVELS.find(item => item.value === this.project.awardLevel)

      if (level) {
        return level.label
      }
      return ''
    }
  },
  created() {
    this.checkCompetition()
  },
  methods: {
    /**
		 * 检查比赛是否为数据库里的比赛
		 */
    async checkCompetition() {
      this.competitions = await this.$rootApp.getComps()
      this.competitions = JSON.parse(JSON.stringify(this.competitions))
      /* 如果该比赛不存在数据库中 */
      if (this.project.compId === 0) {
        const comp = this.competitions.find(item => item.name === this.project.compName)

        console.log(this.competitions)
        /* 1. 已经是新增至库中，则直接修改该项目compId */
        if (comp) {
          this.onclickPutProjectComp(comp.id)
          console.log('竞赛已存在，自动修改')
        } else {
          /* 2. 完全新的比赛，有可能是字打错，此时可以通过选框选择正确的比赛或者添加新的比赛 */
          this.competitions.unshift({ id: 0, name: this.project.compName })
        }
      }
    },
    /**
		 * 点击修改项目竞赛信息
		 */
    async onclickPutProjectComp(compId) {
      this.$loading()
      try {
        const comp = this.competitions.find(item => item.id === compId)

        console.log(comp)
        await putProject({
          projectId: this.project.id,
          compId: comp.id,
          awardLevel: this.awardLevel
        })
        this.$emit('updateProject', {
          ...this.project,
          compId: comp.id,
          compName: comp.name,
          awardLevel: this.awardLevel
        })
        this.$success('修改成功')
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 去创建比赛
		 */
    async onclickCreateComp() {
      try {
        await copyData(this.project.compName, false)
        this.$success('已复制该比赛名，即将跳转比赛管理。创建完后请刷新该页面！')
      } catch (err) {
        console.log(err)
        this.$error('复制该比赛名失败，即将跳转比赛管理，请手动输入比赛名')
      }
      setTimeout(() => {
        window.open(`${ location.origin }/#/operation/competition`)
      }, 1000)
    }
  }
}
</script>

<style lang='scss' scoped>
.project-basic-info .el-form {
  height: 100%;
}
</style>
